<template>
  <div class="g-tab-box" >
    <div class="g-tab-menu">
      <div v-for="(item,index) in list" :key="index" @click="changeTab(index,item)" class="g-tab-item" :class="{active:index===currentActive}">{{ item.name }}</div>
    </div>
    <div class="g-tab-content">
      <!-- 这里也可以通过v-if或者v-show来控制多个组件 -->
      <list ref="list" :g-extra-data="otherQuery" />
    </div>
  </div>
</template>
<script>
import list from './list.vue'
export default {
  components: {
    list
  },
  data () {
    return {
      list: [
        { id: 1, name: '菜单1' },
        { id: 2, name: '菜单2' },
        { id: 3, name: '菜单3' }
      ],
      currentActive: 0,
      otherQuery: {}
    }
  },
  mounted () {
    // 注意在mounted里面调用，因为下面使用ref
    // 获取tab的数据，给每个点击事件，然后主动调用list组件里面的初始化数据的方法
    this.changeTab(0, this.list[0])
  },
  methods: {
    changeTab (index, item) {
      this.currentActive = index // 修改激活索引
      // 将额外的数据放在otherQuery中
      this.otherQuery = {
        otherId: item.id
      }
      // 这里要调用一些$nextTick等props数据更新完成，再更新列表
      this.$nextTick(() => {
        this.$refs.list.gInitData()
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
